﻿<!DOCTYPE html>
<!--安全交底和风险告知确认卡-防护措施设置-->
<!--[by:wanglr]-->
<!--[date:2019-06-14]-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <style>
        /*穿梭框部分*/
        ._rowbox {
            position: relative;
            float: left;
            left: 50%;
            width: 100%;
        }

            ._rowbox ._box {
                padding: 5px;
                float: left;
                border: 1px solid #EBEEF5;
                width: 95%;
            }

                ._rowbox ._box ._sidebox {
                    border: 1px solid #EBEEF5;
                    padding: 5px;
                    margin-top: 10px;
                }

                ._rowbox ._box ._middlebox {
                    padding: 5px;
                    margin-top: 10px;
                    text-align: center;
                }

                    ._rowbox ._box ._middlebox div {
                        margin-bottom: 20px;
                    }
    </style>

</head>
<body style="overflow-x:hidden;">
    <div id="app" v-cloak class="popupW50">
        <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" size="mini" label-position="right">
            <el-row>
                <div class="_rowbox">
                    <el-row style="margin-top:20px;left: -50%; ">
                        <div class="_box">
                            <div><span>{{SecurityAndRiskConfirmationCard.PreventiveMeasuresSelect}}</span></div>
                            <el-col :span="9" class="_sidebox">
                                <div>
                                    <el-col :span="24">
                                        <el-form-item :label="SecurityAndRiskConfirmationCard.UnSelected"> </el-form-item>
                                    </el-col>
                                </div>

                                <div>
                                    <el-col :span="16">
                                        <div class="elst-select-mini">
                                            <el-form-item>
                                                <el-input type="text" v-model="Form.UnSelectInput" autocomplete="off" size="mini">
                                                    <template slot="prepend">
                                                        {{SecurityAndRiskConfirmationCard.PreventiveMeasures_Title+mark.m}}
                                                    </template>
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                    <el-col :span="7" offset="1">
                                        <el-button type="primary" @click="onSearch('left')" style="margin: 3px 0 0 10px;">{{col.btnSelect}}</el-button>
                                    </el-col>
                                </div>
                                <el-table :data="transferData"
                                          border
                                          ref="selectionLeft"
                                          height="300"
                                          style="overflow:hidden;margin: 0 auto;"
                                          @selection-change="checkAll"
                                          @select-all="selectLeftAll">
                                    <el-table-column type="selection"
                                                     align="center"
                                                     width="40">
                                    </el-table-column>
                                    <el-table-column prop="value"
                                                     :label="SecurityAndRiskConfirmationCard.PreventiveMeasures_Title">
                                    </el-table-column>
                                    <el-table-column prop="remark"
                                                     :label="SecurityAndRiskConfirmationCard.Remark">
                                    </el-table-column>
                                </el-table>
                            </el-col>
                            <el-col :span="6" class="_middlebox">
                                <div>
                                    <el-button @click="handelSelect()" icon="el-icon-d-arrow-right" :disabled="nowSelectData.length?false:true" type="primary">
                                        {{col.btnOptionSelect}}
                                    </el-button>
                                </div>
                                <div>
                                    <el-button @click="handelSelectAll()" icon="el-icon-d-arrow-right" type="primary">
                                        {{col.btnAllSelect}}
                                    </el-button>
                                </div>
                                <div>
                                    <el-button @click="handleRemoveSelect" icon="el-icon-d-arrow-left" :disabled="nowSelectRightData.length?false:true" type="primary">
                                        {{col.btnCancel}}
                                    </el-button>
                                </div>
                                <div>
                                    <el-button @click="handleRemoveSelectAll" icon="el-icon-d-arrow-left" type="primary">
                                        {{col.btnAllCancel}}
                                    </el-button>
                                </div>
                            </el-col>
                            <el-col :span="9" class="_sidebox">
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item :label="SecurityAndRiskConfirmationCard.OnSelected"> </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row>

                                    <el-col :span="16">
                                        <div class="elst-select-mini">
                                            <el-form-item>
                                                <el-input type="text" v-model="Form.OnSelectInput" autocomplete="off" size="mini">
                                                    <template slot="prepend">
                                                        {{SecurityAndRiskConfirmationCard.PreventiveMeasures_Title+mark.m}}
                                                    </template>
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                    <el-col :span="7" offset="1">
                                        <el-button type="primary" @click="onSearch('right')" style="margin: 3px 0 0 10px;">{{col.btnSelect}}</el-button>
                                    </el-col>
                                </el-row>
                                <el-table :data="selectArr"
                                          border
                                          ref="selectionRight"
                                          height="300"
                                          style="overflow:hidden;margin: 0 auto;"
                                          @selection-change="checkRightAll"
                                          @select-all="selectRightAll">
                                    <el-table-column type="selection">
                                    </el-table-column>
                                    <el-table-column prop="value"
                                                     :label="SecurityAndRiskConfirmationCard.PreventiveMeasures_Title">
                                    </el-table-column>
                                    <el-table-column prop="remark"
                                                     :label="SecurityAndRiskConfirmationCard.Remark">
                                    </el-table-column>


                                </el-table>
                            </el-col>
                        </div>
                    </el-row>
                </div>
            </el-row>
            <el-row type="flex" justify="end" style="width:100%;margin-top:10px;">
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}</el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>

        </el-form>
        <el-dialog title="录入隐患排查标准" :visible.sync="ListItem.dialogVisible" @close='closeDialog' width="80%" height="80%" top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
    <script type="text/javascript">
        $(function () {
            //同步按钮大小
            var $btns = $("._middlebox button");
            $btns.width($btns.eq(1).width())
            $("._middlebox").height($("._sidebox").height() + 2);
        })
        app = new Vue({
            el: '#app',
            data: {
                //父页传参
                id: '',
                ListItem: ListItem,
                api: '',
                //业务表单内容
                Form: {
                    id: '',
                    PreventiveMeasures: [],
                    //筛选
                    UnSelectInput: '',//待选择排查类别
                    OnSelectInput: '',//已选择排查标准
                },
                Type: [],//排查类别
                //表单验证
                rules: {

                },
                transferData: [],//穿梭框初始化内容
                selectArr: [],  // 已选中
                nowSelectData: [], // 待选择框中选中的部分
                nowSelectRightData: [], // 已选择框中选中的部分
                tempLeft: [],
                tempRight: []
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                closeDialog: function () {
                    this.getData();

                    //此处应补一个添加的内容数组对象
                    this.selectArr = [];
                    this.selectArr = this.handleConcatArr(this.selectArr, this.Form.PreventiveMeasures)
                },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;

                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            //onSubmitForm(this, '/api/RiskContent/SaveInputTable', mythis.Form);
                            myAjax("post", mythis, '/api/SecurityAndRiskConfirmationCard/SaveInputTable', mythis.Form, function (response) {
                                showMessage(msg.OperatingOk, 'success');
                                parent.app.ListItem.dialogVisible = false;
                            });
                        } else {
                            //验证失败
                            return false;
                        }
                    });
                },
                //读取数据
                getData: function () {
                    getData(this, '/api/SecurityAndRiskConfirmationCard/getInputTable?id=' + this.id);
                },
                //以下是穿梭框相关方法
                //初始化穿梭框数据
                generateData: function () {
                    const data = [];
                    for (let i = 1; i <= 15; i++) {
                        data.push(Mock.mock({
                            key: i,
                            value: '生产作业' + i,
                            remark: Mock.mock('@cword(10)')
                        }));
                    }
                    return data;
                },
                //待选择-选中所有
                checkAll: function (val) {
                    this.nowSelectData = val;
                },
                //已选择-选中所有
                checkRightAll: function (val) {
                    this.nowSelectRightData = val;
                },
                // 选中
                handelSelect: function () {
                    //更新实际数据
                    this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData)
                    this.handleRemoveTabList(this.nowSelectData, this.transferData);
                    //更新查询用临时数据
                    if (this.tempRight) this.tempRight = this.handleConcatArr(this.tempRight, this.nowSelectData)
                    if (this.tempLeft) this.handleRemoveTabList(this.nowSelectData, this.tempLeft);
                    //更新传值
                    //this.handleRemoveTabList(this.nowSelectRightData, this.Form.PreventiveMeasures);
                    this.Form.PreventiveMeasures = this.handleConcatArr(this.Form.PreventiveMeasures, this.nowSelectData)
                    //清空选择集合
                    this.nowSelectData = [];
                },
                // 取消
                handleRemoveSelect: function () {
                    //更新实际数据
                    this.transferData = this.handleConcatArr(this.transferData, this.nowSelectRightData)
                    this.handleRemoveTabList(this.nowSelectRightData, this.selectArr);
                    //更新查询用临时数据
                    if (this.tempLeft) this.tempLeft = this.handleConcatArr(this.tempLeft, this.nowSelectRightData)
                    if (this.tempRight) this.handleRemoveTabList(this.nowSelectRightData, this.tempRight);
                    //更新传值
                    //this.Form.PreventiveMeasures = this.handleConcatArr(this.Form.PreventiveMeasures, this.nowSelectData)
                    this.handleRemoveTabList(this.nowSelectRightData, this.Form.PreventiveMeasures);
                    //清空选择集合
                    this.nowSelectRightData = [];
                },
                // 选中全部
                handelSelectAll: function () {
                    this.$refs.selectionLeft.toggleAllSelection();
                },
                // 取消全部
                handleRemoveSelectAll: function () {
                    this.$refs.selectionRight.toggleAllSelection();
                },
                //合并数组
                handleConcatArr: function (selectArr, nowSelectData) {
                    let arr = [];
                    arr = arr.concat(selectArr, nowSelectData);
                    return arr;
                },
                //拆分数组
                handleRemoveTabList: function (isNeedArr, originalArr) {
                    if (isNeedArr.length && originalArr.length) {
                        for (let i = 0; i < isNeedArr.length; i++) {
                            for (let k = 0; k < originalArr.length; k++) {

                                if (isNeedArr[i]["value"] + '' == originalArr[k]["value"] + '') {
                                    originalArr.splice(k, 1);
                                }
                            }
                        }
                    }
                },
                //>>全部选择
                selectLeftAll: function (selection) {
                    this.handelSelect();
                },
                //<<全部撤销
                selectRightAll: function (selection) {
                    this.handleRemoveSelect();
                },
                //穿梭框筛选按钮
                onSearch: function (type) {
                    console.log(type, this.Form.UnSelectInput)
                    if (type === 'left') {
                        if (this.tempLeft.length > 0)
                            this.transferData = this.tempLeft;
                        else
                            this.tempLeft = this.transferData;
                        var leftArr = this.transferData;
                        var newArr = [];
                        for (var i = 0; i < leftArr.length; i++) {
                            var user = leftArr[i];
                            if (this.Form.UnSelectInput && user.value.indexOf(this.Form.UnSelectInput) == -1)
                                continue;
                            newArr.push(leftArr[i]);
                        }
                        this.transferData = newArr;
                    }
                    else if (type === 'right') {
                        if (this.tempRight.length > 0)
                            this.selectArr = this.tempRight;
                        else
                            this.tempRight = this.selectArr;
                        var rightArr = this.selectArr;
                        var newArr = [];
                        for (var i = 0; i < rightArr.length; i++) {
                            var user = rightArr[i];
                            if (this.Form.OnSelectInput && user.value.indexOf(this.Form.OnSelectInput) == -1)
                                continue;
                            newArr.push(rightArr[i]);
                        }
                        this.selectArr = newArr;
                    }

                }
            },
            mounted: function () {
                //this.Region = fn(this.mydata, "0");
                //this.Region.forEach(function (v, i) {
                //    v.id += '';
                //})
                //this.Type = fn(this.RiskType, "0");
                //穿梭框左边可选数据内容初始化(模拟15条测试数据，之后需删除)
                this.transferData = this.generateData();
                this.id = getUrlParam("id");
                this.getData();
                //将父页传过来的数据赋值给当前选中数据
                //this.nowSelectData = this.Form.PreventiveMeasures;
                //初始化穿梭框选中状态
                this.selectArr = this.handleConcatArr(this.selectArr, this.Form.PreventiveMeasures)
                this.handleRemoveTabList(this.Form.PreventiveMeasures, this.transferData);
                ////将父页传过来的数据赋值给当前选中数据
                //this.nowSelectData = this.Form.PreventiveMeasures;
                ////初始化穿梭框选中状态
                //this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData)
                //this.handleRemoveTabList(this.nowSelectData, this.transferData);
                ////初始化完成后，清空当前选中数据
                //this.nowSelectData = [];
            }
        });
    </script>

</body>

</html>